<template>
	<view class="container">

		<view class="input bgcfff flex">
			<input type="text" v-model="userCode" placeholder="请输入用户码" />
			<text @click="signAdminAdd">添加</text>
		</view>
		<view class="item">
			最多可设置5位
		</view>

		<view class="items">
			<view class="item flex  space-between" v-for="item in listData.list " :key="item.id">
				<view class="left">
					<view class="img">
						<image :src="item.user.headimg" mode=""></image>
					</view>
					<view class="info">
						<view class="title">
							{{item.user.nickname}}
						</view>
						<view class="id">
							{{item.user.code}}
						</view>
					</view>
				</view>
				<view class="btndel" @click="deleteAdministrator(item.id)">
					删除
				</view>
			</view>
		</view>



		<view class="text">

			---活动还没有管理员---
		</view>





		<uni-popup ref="message" type="message">
			<uni-popup-message type="success" message="添加成功" :duration="2000"></uni-popup-message>
		</uni-popup>

		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="success" cancelText="关闭" confirmText="删除" title="通知" content="确定要删除此管理员吗？"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>



	</view>
</template>

<script>
	import {
		signAdminAdd,
		signAdminDel,
		signAdminList
	} from '@/api/activity.js';
	export default {

		data() {
			return {
				isadd: false,
				userCode: "",
				code: "",
				listData: {},
				id: ""
			}
		},
		onLoad(options) {
			this.code = options.code
		},
		onShow() {
			this.init()
		},

		methods: {

			init() {
				signAdminList({
					data: {
						code: this.code
					}
				}).then(res => {
					if (res.code == 1) {
						console.log('list', res.data);
						this.listData = res.data
					}
				})
			},

			signAdminAdd() {
				signAdminAdd({
					data: {
						sign_code: this.code,
						user_code: this.userCode
					}
				}).then(res => {
					if (res.code == 1) {
						this.$refs.message.open()
						this.init()
					}
				})
			},
			dialogConfirm() {
				signAdminDel({
					data: {
						id: this.id
					}
				}).then(res => {
					if (res.code == 1) {
						console.log(res.data);
						this.init()
					}
				})
			},
			deleteAdministrator(id) {
				this.$refs.alertDialog.open()
				this.id=id
			},
			gohelp() {
				uni.navigateTo({
					url: "../me/help"
				})
			}

		}

	}
</script>
<style lang="scss" scoped>
	.container {
		background-color: #f6f6f6;
		min-height: 100vh;

		.input {
			font-size: 28upx;
			background-color: #f6f6f6;
			border-radius: 30upx;
			overflow: hidden;
			width: 100%;
			padding: 30upx;
			align-items: center;

			input {
				border: 1px solid #919191;
				border-radius: 30upx;
				width: 80%;
				height: 60upx;
				padding: 0 25upx;
			}

			text {
				margin-left: 15upx;
				font-size: 28upx;
				color: #222;
			}

		}

		.item {
			width: 100%;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			font-size: 30upx;
			background-color: #fff;
		}

		.text {
			margin-top: 100upx;
			text-align: center;
			font-size: 28upx;
		}

		.button {
			color: #fff;
			font-size: 34upx;
			height: 85upx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #1e90ff;
			width: 700upx;
			// margin: 0 auto;
			margin-top: 30upx;
			border-radius: 10upx;
			position: absolute;
			bottom: 20upx;
			left: 25upx;
		}

		.items {

			margin-top: 30upx;

			.item {
				height: 130upx;
				background-color: #fff;
				margin-bottom: 10upx;
				padding: 0 30upx;
				display: flex;
				align-items: center;

				.left {
					display: flex;
					align-items: center;

					height: 100%;

					.img {
						width: 100upx;
						height: 100upx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.info {
						margin-left: 20upx;
						text-align: left;

						.title {
							font-size: 24upx;
							line-height: 1;

						}

						.id {
							line-height: 1;
							margin-top: 8upx;
							font-size: 24upx;
						}

					}
				}

				.btndel {

					display: flex;
					align-items: center;
					border-radius: 8upx;
					background-color: #ff0000;
					color: #fff;
					padding: 6upx 10upx;
					height: 50upx;
					font-size: 28upx;
				}

			}
		}


	}
</style>
